<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add a Server</title>
  <!-- Include Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    body {
      background: linear-gradient(to bottom right, #3494E6, #EC6EAD);
      color: #fff;
      height: 100vh;
    }

    .card {
      border: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      background-color: #fff;
    }

    .card-header {
      background-color: #007BFF;
      color: #fff;
    }

    .card-title {
      font-size: 24px;
    }

    .form-control {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
    }

    .btn-primary {
      background-color: #007BFF;
      border: none;
    }

    .btn-primary:hover {
      background-color: #0056b3;
    }

    .btn-secondary {
      background-color: #6c757d;
      border: none;
    }

    .btn-secondary:hover {
      background-color: #5a6268;
    }

    .toast {
      background-color: #28a745;
      color: #fff;
    }

    /* Custom styling for form elements */
    .form-container {
      margin-top: 20px;
    }

    .form-label {
      font-weight: bold;
    }

    .btn-container {
      margin-top: 20px;
    }

    /* Responsive styling for small screens */
    @media (max-width: 576px) {
      .form-container {
        margin-top: 10px;
      }

      .btn-container {
        margin-top: 10px;
      }
    }
  </style>
  <link rel="stylesheet" href="/css/navbar.css">
</head>
<body>
  <%- include('partials/navbar') %>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3 form-container">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Add a Server</h3>
          </div>
          <div class="card-body">
            <form>
              <div class="mb-3">
                <label for="serverIP" class="form-label">Server IP:</label>
                <input type="text" id="serverIP" class="form-control" required>
              </div>

              <div class="mb-3">
                <label for="serverPort" class="form-label">Server Port:</label>
                <input type="text" id="serverPort" class="form-control" required>
              </div>

              <div class="mb-3">
                <label for="rconPassword" class="form-label">RCON Password:</label>
                <input type="password" id="rconPassword" class="form-control" required>
              </div>

              <div class="btn-container">
                <button id="submitButton" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-secondary">Reset</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Include Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function () {
      // Event listener for the submit button
      $('#submitButton').on('click', function (e) {
        e.preventDefault(); // Prevent the default form submission

        // Get input values
        const server_ip = $('#serverIP').val();
        const server_port = $('#serverPort').val();
        const rcon_password = $('#rconPassword').val();

        if (!server_ip || !server_port || !rcon_password) {
          alert('All fields are required.');
          return; // Do not proceed with the request
        }

        // Create server data object
        const serverData = {
            server_ip,
            server_port,
            rcon_password,
        };

        // Make an API POST request to add the server
        $.ajax({
          url: '/api/add-server', // Adjust the API endpoint
          type: 'POST',
          data: JSON.stringify(serverData),
          contentType: 'application/json',
          success: function (data) {
            // Display a success toast message
            alert('Server added successfully!')
            $('#successToast').toast('show');
            $('#serverIP, #serverPort, #rconPassword').val('');
          },
          error: function (error) {
            console.error(error);
            alert('An error occurred while adding the server.');
          },
        });
      });
    });
  </script>
</body>
</html>
